<template>
  <div class="about">
    <button
      @click="like"
    >❤</button>
    <h1 @click="num++">{{num}}</h1>
    <!-- v-for除了遍历数组意外,可以遍历整数 -->
    <div class="clock">
      <div
        class="mark"
        :class="{show}"
        v-for="(d,i) in 60"
        :key="d"
        :style="`transition-delay:${i*20}ms;transform:rotate(${6*i}deg) translateY(-95px);transition:${td}`">
      </div>
      <div
        class="h"
        :class="{show}"
        :style="`transform:rotate(${30*h+30*(m/60)}deg);transition:${td}`">
      </div>
      <div
        class="m"
        :class="{show}"
        :style="`transform:rotate(${6*m}deg);transition:${td}`">
      </div>
      <div
        class="s"
        :class="{show}"
        :style="`transform:rotate(${6*s}deg);transition:${td}`">
      </div>
      <!-- <div class="h" :style="`transform:rotate(${30*h+30*(m/60)}deg)`"></div>
      <div class="m" :style="`transform:rotate(${6*m}deg)`"></div>
      <div class="s" :style="`transform:rotate(${6*s}deg)`"></div> -->
    </div>
  </div>
</template>
<script>
  //  ES6的模块导出
  export default{
    data(){
      return {
        num:10,
        h:0,
        m:0,
        s:0,
        timeId:null,
        show: false,
        td:'1s'
      }
    },
    methods:{
      setTime(){
        if(this.show)
          this.td='0s'
        const date = new Date();
        this.h=date.getHours();
        this.m = date.getMinutes();
        this.s=date.getSeconds();
        this.show = true;
      },
      // 数据和方法都是通过this来访问的
      start(){
        this.timeId=setInterval(this.setTime, 1000);
      },
      like(){
        window.eventBus.$emit('add',100)
      }
    },
    created(){
      //created生命周期钩子函数中可以使用this,可以访问数据,可以调用方法,跟mounted区别就是没有DOM
      this.start();
    },
    //beforeDestroy用来解绑手动绑定的事件,用来停掉定时器
    beforeDestroy(){
      clearInterval(this.timeId)
    }
    // mounted(){
    //   setInterval(()=>{this.setTime()},1000)
    // }
  }
</script>

<style lang="sass">
.about
  color: blue
  h1
  border: 2px solid #000
.clock
  margin: 20px auto
  position: relative
  width: 200px
  height: 200px
  border-radius: 50%
  border: 2px solid #333
  &:after
    content: ''
    position: absolute
    top: 50%
    left: 50%
    height: 12px
    width: 12px
    border-radius: 50%
    background: #000
    transform: translate(-50%,-50%)
  .mark
    position: absolute
    top: 50%
    left: 50%
    margin: -3px 0 0 -1px
    width: 2px
    height: 6px
    background: #999
    opacity: 0
    transition: .3s
  .mark.show
    opacity: 1
  .mark:nth-child(5n+1)
    height: 10px
    margin-top: -5px
    background: #666
  .h, .m, .s
    position: absolute
    left: 50%
    bottom: 50%
    transform-origin: 50% 100%
    border-radius: 1px
    opacity: 0
    // transition: 1s
  .h.show,.m.show,.s.show
    opacity: 1
  .h
    width: 6px
    height: 60px
    background: #333
    margin-left: -3px
  .m
    width: 4px
    height: 70px
    background: #666
    margin-left: -2px
  .s
    width: 2px
    height: 80px
    background: #999
    margin-left: -1px
</style>
